<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人员管理系统 - 管理面板</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
            background-color: #f5f5f5;
            color: #252b3a;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 顶部导航 */
        .header {
            background-color: #1c2b36;
            color: white;
            padding: 0 20px;
            height: 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header h1 {
            font-size: 20px;
            font-weight: normal;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .logout-btn {
            color: white;
            text-decoration: none;
            padding: 6px 12px;
            border: 1px solid rgba(255,255,255,0.3);
            border-radius: 4px;
            transition: all 0.2s;
        }

        .logout-btn:hover {
            background-color: rgba(255,255,255,0.1);
        }

        /* 主要内容区 */
        .main-container {
            flex: 1;
            display: flex;
            min-height: calc(100vh - 60px);
        }

        /* 侧边栏 */
        .sidebar {
            width: 220px;
            background-color: white;
            border-right: 1px solid #e6e6e6;
            padding: 20px 0;
        }

        .nav-item {
            padding: 12px 20px;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 10px;
            color: #252b3a;
            text-decoration: none;
        }

        .nav-item:hover {
            background-color: #f5f5f5;
        }

        .nav-item.active {
            background-color: #e6f7ff;
            color: #1890ff;
            border-right: 3px solid #1890ff;
        }

        /* 内容区 */
        .content {
            flex: 1;
            padding: 20px;
            background-color: #f5f5f5;
        }

        .content-header {
            margin-bottom: 20px;
        }

        .content-header h2 {
            font-size: 24px;
            font-weight: normal;
            color: #252b3a;
        }

        /* 功能卡片 */
        .card-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

        .card {
            background-color: white;
            border-radius: 4px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .card h3 {
            font-size: 18px;
            margin-bottom: 10px;
            color: #252b3a;
        }

        .card p {
            color: #575d6c;
            margin-bottom: 15px;
        }

        .card-footer {
            display: flex;
            justify-content: flex-end;
        }

        .card-btn {
            padding: 6px 12px;
            background-color: #1c2b36;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            text-decoration: none;
            transition: background-color 0.2s;
        }

        .card-btn:hover {
            background-color: #2d3e4a;
        }
    </style>
</head>
<body>
    <header class="header">
        <h1>人员管理系统</h1>
        <div class="user-info">
            <span>欢迎，{{ username }}</span>
            <a href="javascript:void(0)" onclick="logout()" class="logout-btn">退出登录</a>
        </div>
    </header>

    <div class="main-container">
        <nav class="sidebar">
            <a href="#" class="nav-item active" onclick="showModule('dashboard')">
                <span>控制面板</span>
            </a>
            <a href="#" class="nav-item" onclick="showModule('employees')">
                <span>员工管理</span>
            </a>
            <a href="#" class="nav-item" onclick="showModule('departments')">
                <span>部门管理</span>
            </a>
            <a href="#" class="nav-item" onclick="showModule('roles')">
                <span>角色管理</span>
            </a>
            <a href="#" class="nav-item" onclick="showModule('help')">
                <span>帮助文档</span>
            </a>
        </nav>

        <main class="content">
            <div class="content-header">
                <h2>控制面板</h2>
            </div>
            <div class="card-container">
                <div class="card">
                    <h3>员工管理</h3>
                    <p>管理公司员工信息，包括基本信息、照片等。</p>
                    <div class="card-footer">
                        <a href="#" class="card-btn" onclick="showModule('employees')">进入管理</a>
                    </div>
                </div>
                <div class="card">
                    <h3>部门管理</h3>
                    <p>管理公司部门结构，设置部门主管等。</p>
                    <div class="card-footer">
                        <a href="#" class="card-btn" onclick="showModule('departments')">进入管理</a>
                    </div>
                </div>
                <div class="card">
                    <h3>角色管理</h3>
                    <p>管理系统角色和权限设置。</p>
                    <div class="card-footer">
                        <a href="#" class="card-btn" onclick="showModule('roles')">进入管理</a>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script>
        // 检查登录状态
        function checkLogin() {
            const token = localStorage.getItem('token');
            if (!token) {
                window.location.href = '/';
            }
        }

        // 退出登录
        function logout() {
            localStorage.removeItem('token');
            window.location.href = '/';
        }

        // 显示不同模块
        function showModule(module) {
            // 更新导航项的激活状态
            document.querySelectorAll('.nav-item').forEach(item => {
                item.classList.remove('active');
            });
            event.currentTarget.classList.add('active');

            // 这里可以添加模块切换的逻辑
            console.log('切换到模块:', module);
        }

        // 页面加载时检查登录状态
        window.onload = checkLogin;
    </script>
</body>
</html> 